import React from 'react';
import 'element-theme-default';
import { Dialog,Form,Input,Button} from 'element-react';
import {IndexLink,Link,Route} from 'react-router-dom';
import Axios from 'axios';

class Login extends React.Component{
    constructor(props) {
        super(props);

         this.state = {
            form: {
            pass: '',
            id:'',
            },
            rules: {
                pass: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { validator: (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请输入密码'));
                    } else {
                        callback();
                    }
                    } }
                ],
                id: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { validator: (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请输入账号'));
                    }else {
                        callback();
                    }
                    } }
                ],
            },
            regform:{
                regid:'',
                regpass:'',
                checkPass:'',
            },
            regrules:{
                regid:[
                    {required:true,message:'请输入帐号',trigger:'blur'},
                    { validator: (rule, value, callback) => {
                        if (value === '') {
                            callback(new Error('请输入帐号'));
                        } else {
                            var reg=/^[0-9]{5,11}$/;
                            if(reg.test(value)){
                                callback();
                            }else{
                                callback(new Error('账号格式不对！'));
                            }
                            
                        }
                    } }
                ],
                regpass: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { validator: (rule, value, callback) => {
                        if (value === '') {
                            callback(new Error('请输入密码'));
                        } else {
                            if (this.state.regform.checkPass !== '') {
                                this.refs.regform.validateField('checkPass');
                            }
                            callback();
                        }
                        } }
                    ],
                checkPass: [
                    { required: true, message: '请再次输入密码', trigger: 'blur' },
                    { validator: (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请再次输入密码'));
                    } else if (value !== this.state.regform.regpass) {
                        callback(new Error('两次输入密码不一致!'));
                    } else {
                        callback();
                    }
                    } }
                ],
            }
        };
    }
    onChange(key, value) {
        this.setState({
            form: Object.assign({}, this.state.form, { [key]: value })
        });
    }
    onChangereg(key, value) {
        this.setState({
            regform: Object.assign({}, this.state.regform, { [key]: value })
        });
    }
    handleSubmit(e) {
        e.preventDefault();
        this.refs.form.validate((valid) => {
            if (valid) {
                var id=this.state.form.id;
                var password=this.state.form.pass;
                var msg = document.getElementById('login-msg');
                Axios({
                    method:'post',
                    url:'http://10.31.160.62:3000/users/login',
                    data:{
                        id:id,
                        password:password
                    },
                     headers: {
                        'Content-Type': 'application/json;charset=UTF-8'
                    },
                    dataType:'json',
                }).then(function(data){
                    if(data.data.err !=''){
                        msg.style.visibility='visible';
                    }else{
                        localStorage.setItem('id',id);
                        window.location.href='/';
                        console.log(localStorage.getItem('id'));
                    }
                })
            } else {
                console.log('error submit!!');
            return false;
            }
        });
    }
    regSubmit(e) {
        e.preventDefault();
        this.refs.regform.validate((valid) => {
            if (valid) {
                var id=this.state.regform.regid;
                var password=this.state.regform.regpass;
                Axios({
                    method:'post',
                    url:'http://10.31.160.62:3000/users/register',
                    data:{
                        id:id,
                        password:password
                    }, 
                    dataType:'json',
                }).then(function(data){
                    var msg = document.getElementsByClassName('reg-msg')[0];
                    var dialog =document.getElementsByClassName('login-dialog')[0];
                    var regdialog = document.getElementsByClassName('reg-dialog')[0];
                    if(data.err!=''){
                        msg.style.visibility='visible';
                    }
                    if(data.msg!=''){
                        dialog.style.display='block';
                        regdialog.style.display='none';
                    }

                })
            } else {
                console.log('error submit!!');
                return false;
            }
        });
    }
    render(){
        return(
            <div>
                <div className="mod_profile_unlogin">
                    <div className="login-box">
                        <h2 className="profile_unlogin__tit animated  fadeInUp"></h2>
                        <div className="profile_unlogin__desc animated  fadeInUp" ></div>
                        <a href="javascript:;" className="btn-login animated  fadeInUp" >立即登录</a>
                    </div>
                </div>
                <div className="loginmodal"></div>
                <div className="login-dialog">
                    <div className="login-title">
                        <span>QQ登录</span><span>微信登录</span>
                        <a className="dialog-close">
                            <i className="el-icon-close"></i>
                        </a>
                    </div>
                    <div className="dialog-body">
                        <h2>帐号密码登录</h2>
                        <p>推荐使用快速安全登录，防止盗号</p>
                        <p id="login-msg">你输入的帐号或密码不正确，请重新输入。</p>
                        <Form ref="form" model={this.state.form} rules={this.state.rules} labelWidth="0" className="demo-ruleForm">
                            <Form.Item prop="id">
                                <Input type="text"  value={this.state.form.id} onChange={this.onChange.bind(this, 'id')} autoComplete="off" placeholder="账号"/>
                            </Form.Item>
                            <Form.Item  prop="pass">
                                <Input type="password" value={this.state.form.pass} onChange={this.onChange.bind(this, 'pass')} autoComplete="off" placeholder="密码"/>
                            </Form.Item>
                            <Form.Item>
                                <Button type="success" onClick={this.handleSubmit.bind(this)}  className="dialog-btnlogin">登录</Button>
                            </Form.Item>
                        </Form>
                    </div>
                    <div className="dialog-footer">
                        <p>
                            <span>忘记密码？</span>|<span className="toReg">注册新帐号</span>|<span>意见反馈</span>
                        </p>
                    </div>
                </div>
                <div className="reg-dialog">
                    <div className="reg-title">
                        <span>注册</span>
                        <a href="javascript:;" className="reg-close">
                            <i className="el-icon-close"></i>
                        </a>
                    </div>
                    <div className="reg-body">
                        <p className="reg-msg">该用户名已存在</p>
                        <Form ref="regform" model={this.state.regform} rules={this.state.regrules} labelWidth="0" className="regForm">
                            <Form.Item prop="regid">
                                <Input type="text"  value={this.state.regform.regid} onChange={this.onChangereg.bind(this, 'regid')} autoComplete="off" placeholder="5-11位的纯数字"/>
                            </Form.Item>
                            <Form.Item  prop="regpass">
                                <Input type="password" value={this.state.regform.regpass} onChange={this.onChangereg.bind(this, 'regpass')} autoComplete="off" placeholder="密码"/>
                            </Form.Item>
                            <Form.Item prop="checkPass">
                                <Input type="password" value={this.state.regform.checkPass} onChange={this.onChangereg.bind(this, 'checkPass')} autoComplete="off" placeholder="确认密码"/>
                            </Form.Item>
                            <Form.Item>
                                <Button type="success" onClick={this.regSubmit.bind(this)}  className="dialog-btnreg">注册</Button>
                            </Form.Item>
                        </Form>
                    </div>
                    <div className="reg-footer">
                        <p>
                            <span className="toLogin">登录</span>|<span>意见反馈</span>
                        </p>
                    </div>
                </div>
            </div>
        )
    }
    componentDidMount(){
        var btn = document.getElementsByClassName('btn-login')[0];
        var modal = document.getElementsByClassName('loginmodal')[0];
        var dialog =document.getElementsByClassName('login-dialog')[0];
        var btnclose =document.getElementsByClassName('dialog-close')[0];
        btn.onclick=function(){
            modal.style.display='block';
            dialog.style.display="block";
            document.body.style.overflow="hidden";
        }
        btnclose.onclick=function(){
            modal.style.display='none';
            dialog.style.display="none";
            document.body.style.overflow="auto";
        }
        var btnToreg = document.getElementsByClassName('toReg')[0];
        var btnTologon = document.getElementsByClassName('toLogin')[0];
        var btnregclose = document.getElementsByClassName('reg-close')[0];
        var regdialog = document.getElementsByClassName('reg-dialog')[0];
        btnToreg.onclick=function(){
            dialog.style.display='none';
            regdialog.style.display="block";
        }
        btnTologon.onclick=function(){
            dialog.style.display='block';
            regdialog.style.display="none";
        }
        btnregclose.onclick=function(){
            modal.style.display='none';
            regdialog.style.display="none";
            document.body.style.overflow="auto";
        }
    }
}
export default Login;